<!DOCTYPE html>

<html lang="zh-ch">
	<head>
		<meta charset="utf-8">
		<title>所有html元素样式</title>
		<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
		<link rel="stylesheet" type="text/css" href="style.css">
		<script type="text/javascript" src="js.js" charset="UTF-8"></script>
	</head>

	<body>

		<header>
			<h1>所有Html元素样式</h1>
		</header>

		<details>
			<summary></summary>
			<hr>
		</details>
<!-- ===================================================== -->
	
		<details>
			<input type="text" id="input_mouse">
			<summary>键盘事件</summary>
			<script>
				var b = document.getElementsByTagName("body")[0]
				var inp = document.getElementById("input_mouse")
				b.onkeydown = function(event) {
					var e = event || window.event || arguments.callee.caller.arguments[0]
					inp.value=e.keyCode
					inp.value = evnet.type
					// event.stopPropagation() // 事件停止传递
				}
				b.onkeyup = function () {
					inp.value="松开"
				}
				// document.addEventListener("contextmenu", func)
				// function func(e) {
				// 	e.preventDefault() // 阻止默认事件  比方说右键菜单
				// }
			</script>
			<hr>
		</details>
<!-- ===================================================== -->
	
		<details>
			<summary>node</summary>
			element.nodeName 和 element.tagName 返回元素名称 <br>
			element.nodeType 元素节点类型<br>
			<pre>	元素-1、属性-2、文本-3</pre>
			element.nodeValue 设置或返回元素值<br>
			<pre>	元素-null、属性-属性值、文本-文本内容</pre>
			element.parentNode 父节点<br>
			element.childNodes 返回元素节点的 NodeList <br>
			element.children 返回元素的子元素 <br>
			element.firstChild 返回第一个子节点 <br>
			<hr>
		</details>
<!-- ===================================================== -->
		<details>
			<summary>getElementById、getElementsByName、getElementsByTagName、innerHTML</summary>
			<input type="text" id="input_1">
			<input type="text" name="input_t">
			<input type="text" name="input_t">
			<input type="button" onclick="testGetElementsByTagName()" value="button">
			<input type="text" id="input_1" value="testInput">
			<h4 id="h4">testsetset</h4>	
			<script>
				var li = document.getElementById("input_1")
				li.value = "test getElementById"

				// 获取所有名称一样的元素列表
				var l = document.getElementsByName("input_t")
				for (var i = 0; i < l.length; i++) {
					l[i].value = "test getElementsByName"
				}

				function testGetElementsByTagName() {
					// 获取所有的input元素 列表
					var tns = document.getElementsByTagName("input")
					for (var i = 0; i < tns.length; i++) {
						tns[i].value = "test"
					}
				}
				var tt = document.getElementById("input_1")
				document.write(tt.tagName +" "+ tt.value)	// nodeName
				// tt.style.background = 'blue'
				tt.style.textShadow="2px 2px 3px blue"
				tt.style.fontSize = "22px"
				tt.style.background = "rgba(150,50,25,0.2)"
				tt.setAttribute("type", "button")
				document.write(tt.getAttribute("type"), "<br>")
				tt.removeAttribute("type")

				var tt = document.getElementById("h4")
				document.write(tt.tagName +" "+ tt.innerHTML)
				tt.innerHTML = "hello test" // 设置或返回 元素的内容

				document.write(tt.id," name:",tt.name," className:",tt.className, " title:", tt.title)
			</script>
			<hr>
		</details>
<!-- ===================================================== -->
		<details>
			<summary>简单老虎机 类游戏</summary>
			<section id="section_game">
			</section>
			<hr>
			请输入新的菜单：<input type="text" id="btn_name">
			<input type="button" value="生成" onclick="createBtn('')">
			<hr>
			<input type="button" value="开始" onclick="start()">
			<hr>
			<script>
				init()
			</script>
		</details>
<!-- ===================================================== -->

		<details>
			<summary>窗口练习</summary>
			<input type="button" value="open" onclick="fopen()">
			<input type="button" value="close" onclick="fclose()">
			<input type="button" value="change" onclick="fchange()">
			<input type="button" value="resize" onclick="fresize()">
			<hr>
		</details>
<!-- ===================================================== -->

		<details>
			<summary>alert、confirm、prompt、close、倒计时、时钟、history、location、screen、navigator</summary>
			<input type="button" onclick="test_confirm()" value="confirm">
			<input type="button" onclick="test_prompt()" value="prompt">
			<input type="button" onclick="test_open()" value="open">
			<input type="button" onclick="test_close()" value="close">
			<br>
			倒计时：<label id="label_2">100.00</label> 
			<input type="button" onclick="startInterval(10)" value="开始">   <!-- 0.01秒一次 -->
			<input type="button" onclick="stopInterval()" value="结束">
			<br>
			<input type="button" onclick="settimeout(1000)" value="1秒后">
			<input type="button" onclick="cleartimeout()" value="取消">
			<br>
			<input type="button" value="跳转百度" onclick="location.assign('http://www.baidu.com')">
			<input type="button" value="刷新" onclick="location.reload()">
			<input type="button" value="跳转百度" onclick="location.replace('http://www.baidu.com')">    <!-- 跳转百度 不留记录 -->
			<br>
			<script>
				// print()  // 打印
				document.write("location.href = " ,location.href, " <br>")
				document.write("location.host = " ,location.host, " <br>")
				document.write("location.hash = " ,location.hash, " <br>")
				document.write("location.hostname = " ,location.hostname, " <br>")
				document.write("location.pathname = " ,location.pathname, " <br>")
				document.write("location.port = " ,location.port, " <br>")
				document.write("location.protocol = " ,location.protocol, " <br>")
				document.write("location.search = " ,location.search, " <br>")
				document.write("screen.availHeight 不包含工具栏 ",screen.availHeight, "<br>")
				document.write("screen.Height 包含工具栏 ",screen.height, "<br>")

				document.write("navigator.appCodeName 浏览器代码名：",navigator.appCodeName, "<br>")
				document.write("navigator.appMinorVersion 浏览器次级版本：",navigator.appMinorVersion, "<br>")
				document.write("navigator.appName 浏览器名称：",navigator.appName, "<br>")
				document.write("navigator.appVersion 浏览器版本：",navigator.appVersion, "<br>")
				document.write("navigator.cookieEnabled 浏览器是否启用cookie：",navigator.cookieEnabled, "<br>")
				document.write("navigator.userAgent ：",navigator.userAgent, "<br>")
				document.write("navigator.onLine 浏览器脱机模式：",navigator.onLine, "<br>")
			</script>
			<br>
			<input type="button" value="返回" onclick="history.back()">
			<input type="button" value="返回" onclick="history.go(-1)">
			<input type="button" value="前进" onclick="history.forward()">
			<input type="button" value="前进" onclick="history.go(1)">
			<hr>
		</details>
<!-- ===================================================== -->

		<details>
			<summary>Math、input 等综合</summary>
			<section id="test_body">
				<input type="number" placeholder="请输入年份：" id="input1">
				<input type="button" value="查询" onclick="search()">
				<br>
				<label id="label1">结果：</label>
				<hr>

				<input type="color" id="color_1" value="#546587" onchange="setBg()">
				<input type="range" min="1" max="100" id="range_a" onchange="setBg()">
				<hr>

				<input type="button" value="随机设置背景颜色" onclick="randSetBg()">
			</section>
			<hr>
		</details>
<!-- ===================================================== -->

		<details>
			<summary>字符串操作</summary>
			<script>
				var str = "hello"
				document.write(str," =",str.length,"<br>")

				var num = 25
				document.write("num.toString(2) ",num.toString(2), "<br>")
				document.write("num.toString(8) ",num.toString(8), "<br>")
				document.write("num.toString(16) ",num.toString(16), "<br>")

				str = "123.121"
				document.write("parseInt ",parseInt(str), "<br>")
				document.write("parseFloat ",parseFloat(str), "<br>")
				document.write("Number ",Number(str),"<br>")

				str = "0xa12313"
				document.write("Number ",Number(str),"<br>")

				str = "hello"
				document.write("str.charAt(0) ",str.charAt(0),"<br>")
				document.write("str[0] ",str[0],"<br>")
				document.write("str.charCodeAt(0) ",str.charCodeAt(0),"<br>")
				document.write("str.concat(\"123\") ",str.concat("123"),"<br>")
				document.write("str.slice(1,3) ",str.slice(1,3),"<br>")
				str="12 1231231 123 1231 2312 3"
				arr = str.split(' ')
				for (var i = 0; i < arr.length; i++) {
					document.write(arr[i], "<br>")
				}
				str = "hello"
				document.write("str.indexOf('l') ", str.indexOf('l'),"<br>")
				document.write("str.lastIndexOf('l') ", str.lastIndexOf('l'),"<br>")
				document.write("str.toLowerCase() ", str.toLowerCase(),"<br>")
				document.write("str.toUpperCase() ", str.toUpperCase(),"<br>")
				document.write("str.match('e') ", str.match('e'),"<br>")
				document.write("str.replace() ", str.replace('l', 'L'),"<br>")
			</script>
			<hr>
		</details>
<!-- ===================================================== -->

		<details>
			<summary>Math 函数</summary>
			<script>
				document.write(Math.ceil(1.1),"<br>")	// 上舍入
				document.write(Math.floor(1.9),"<br>")	// 下舍入
				document.write(Math.round(1.5),"<br>")	// 四舍五入
				document.write(Math.random(), "<br>")
				document.write(Math.floor(Math.random()*1000), "<br>")
				for (var i = 0; i < 10; i++) {
					document.write(Math.floor(Math.random()*10), "<br>")
				}
				document.write(Math.cos(100), "<br>")
				document.write(Math.max(1,2,31,23,123), "<br>")
				document.write(Math.min(1,2,31,23,123), "<br>")
				document.write(Math.abs(-13), "<br>")
				document.write(Math.pow(3,2), "<br>")
			</script>
			<hr>
		</details>
<!-- ===================================================== -->

		<details>
			<summary>date 时间相关</summary>
				<script>
					// var date = new Date()
					// var date = new Date(1213132132121)  // 毫秒数
					var date = new Date(2017,11,3,09,57,22)	
					document.write(date)		

					document.write("<br>")

					var date1 = new Date()
					// document.write(Date.parse("11/3/2016")) // 2016.11.03
					document.write(Date.parse(date1))
					document.write("<br>")
					document.write(Date.UTC(2017,11,3,10,4))
					document.write("<br>")

					document.write(date1.toString())
					
					document.write("<br>")
					var t2 = date1.toDateString()	// 日期部分
					document.write(t2)

					document.write("<br>")
					var t3 = date1.toTimeString()	// 时间部分
					document.write(t3)

					document.write("<br>")
					var t4 = date1.toLocaleString()	// 本地时间
					document.write(t4)

					document.write("<br>")
					var t5 = date1.valueOf()	// 毫秒数
					document.write(t5)

					document.write(date.toLocaleString(), " <br>")		

					document.write("getDate = ",date.getDate(), " <br>")
					document.write("getDay = ",date.getDay(), " <br>") // 星期日-0 星期1-1
					document.write("getFullYear = ",date.getFullYear(), " <br>")
					document.write("getHours = ",date.getHours(), " <br>")
					document.write("getMilliseconds = ",date.getMilliseconds(), " <br>")
					document.write("getMonth = ",date.getMonth(), " <br>")
					document.write("getSeconds = ",date.getSeconds(), " <br>")
					document.write("getTime = ",date.getTime(), " <br>")

					date.setFullYear(2222)
					document.write("getFullYear = ",date.getFullYear(), " <br>")

				</script>
			<hr>
		</details>
<!-- ===================================================== -->
	
		<details>
			<summary>数组相关操作</summary>
			<script>
				function show(arr) {
					document.write("<br>")
					for (x in arr) {
						document.write(arr[x],",")
					}	
				}
				var arr = new Array(4)
				arr.length = 9
				document.write(arr.length)
				arr.push(22) // 末尾压入
				document.write(arr)
				for (var i = 0; i < arr.length; i++) {
					arr[i] = i+1
				}
				document.write("<br>")
				for (var i = 0; i < arr.length; i++) {
					document.write(arr[i],",")
				}
				delete arr[5]				
				show(arr)
				arr.pop() // 末尾输出
				show(arr)
				arr.shift(arr) //首部删除
				show(arr)
				document.write("<br>", arr.toString()) // 改成字符串
				document.write("<br>", arr.join('-'))
				show(arr.reverse()) //逆序
				arr[5] = 22
				arr.sort()	// 排序
				show(arr)

				function sortFun(a, b) {
					if (a > b ) {
						return 1
					} else if (a < b) {
						return -1
					}
					return 0
				}
				arr.sort(sortFun)
				show(arr)

				var arr1 = ['a','b']
				arr = arr.concat(arr1)
				show(arr)
				arr = arr.concat(1,2,3,4,4,5)
				show(arr)
				arr.splice(0,0,  444) // 开始下标，元素个数，替换/插入的元素 们
				show(arr)
				show(arr.slice(3,6)) // 切片

				brr= arr.slice(3,6)
				brr[0]=321
				show(arr)
				show(brr)

				var person = {name:"Luke", age : 12 , sex:"male"}

				for (x in person) {
					document.write(x, "=",person[x],"<br>")
				}
			</script>
			<hr>
		</details>
<!-- ===================================================== -->

		<details>
			<summary>js的对象等等</summary>
			<script>
				var people = {}
				people.name = "是哪"
				people.sex = "男"
				people.age = 44
				people.测试 = 123
				delete people.测试
				document.write("<br>",people.name, people.sex, people.age, people.测试)
				function say() {
					document.write('asdlfkjasdf')
				}
				people.say = say

				people.say()
			</script>
			<hr>
		</details>
<!-- ===================================================== -->

		<details>
			<summary>canvas、JavaScript 练习</summary>
			<canvas id="mycanvas3" width="1080" height="720" >
				浏览器不支持H5 canvas元素
			</canvas>
			<script>
				var canvas = document.getElementById('mycanvas3')
				var ctx = canvas.getContext('2d')

				draw(30, 10, 240)

				function draw(n,r,R) {
					for (var i = 0; i < 20; i++) {
						for (var j = 0; j < 10; j++) {
							ctx.fillStyle = 'rgba('+R+','+ i*j +','+i*j+','+(i+1)/20+')'

							ctx.beginPath()
							ctx.arc(15 + i*n, 15 + j*n,r,0, Math.PI*2, true)
							ctx.fill()	
							ctx.closePath()
						}
					}
				}
			</script>
			<hr>
		</details>
<!-- ===================================================== -->

		<details>
			<summary>简单的JavaScript</summary>
			长：<input type="number" id="c">
			宽：<input type="number" id="k">
			<input type="button" value="计算" onclick="fun()">
			<hr>
			<script>
				function fun() {
					alert("矩形面积为："+c.value * k.value)
				}
				
				function poeple() {
				var sum = 0
				for (var i = 0; i < arguments.length; i++) {
					document.write(arguments[i], i+1 == arguments.length ?"=":"+")
					sum += arguments[i]
				}
				document.write(sum)
			}
			poeple(12,31,23,12,31,23,123,2,3)
			</script>
		</details>
<!-- ===================================================== -->

		<details>
			<summary>图片裁剪</summary>
			<img src="http://pic6.nipic.com/20091207/3337900_161732052452_2.jpg" alt="" id="img1">
			<hr>
		</details>
<!-- ===================================================== -->

		<details>
			<summary>css 定位</summary>
			<div id="div4" class="div_class"></div>
			<div id="div5" class="div_class"></div>
			<div id="div6" class="div_class"></div>
			<hr>
		</details>
<!-- ===================================================== -->

		<details>
			<summary>文本属性</summary>
			<p id="p11">设置文本颜色设置文本颜色设置文本颜色设置文本颜色设置文本颜色设置文本颜色设置文本颜色设置文本颜色设置文本颜色设置文本颜色设置文本颜色设置文本颜色设置文本颜色设置文本颜色设置文本颜色设置文本颜色设置文本颜色设置文本颜色设置文本颜色设置文asdfasdfasdfdsf本颜色设置文本颜色设置文本颜色设置文本颜色设置文本颜色设置文本颜色设置文本颜色设置文本颜色设置文本颜色设置文本颜色设置文本颜色设置文本颜色设置文本颜色设置文本颜色设置文本颜色设置文本颜色设置文本颜色设置文本颜色设置文本颜色</p>
			<p id="p12">html hTml htMl htmL  HTML 内边距 外边距  线框</p>
			<p id="p13">测试内容</p>
			<hr>
		</details>
<!-- ===================================================== -->
		<details>
			<summary>字体相关</summary>
			<p id="p1">alsdkfjladjsf测试</p>
			<p id="p2">alsdkfjladjsf测试</p>
			<p id="p3">alsdkfjladjsf测试</p>
			<p id="p4">alsdkfjladjsf测试</p>
			<p id="p5">alsdkfjladjsf测试</p>
			<p id="p6">alsdkfjladjsf测试</p>
			<p id="p7">alsdkfjladjsf测试</p>
			<p id="p8">alsdkfjladjsf测试</p>
			<p id="p9">alsdkfjladjsf自定义字体</p>
			<hr>
		</details>
<!-- ===================================================== -->

		<details>
			<summary>颜色 透明度</summary>
			<h1 style="color: rgba(0,150,150,0.5);">test</h1>
			<h1 style="color: rgba(0,150,150,1);">test</h1>
			<h1 style="color: hsl(120,50%,50%);">test</h1>
			<h1 style="color: hsla(120,50%,50%, 0.4);">test</h1>
			<hr>
		</details>
<!-- ===================================================== -->

		<details>
			<summary>样式 伪元素选择器</summary>
			<p>
				abcdef <br>
				asdfasdf <br>
			</p>

			<a href="">搜索</a>
			<hr>
		</details>
<!-- ===================================================== -->

		<details>
			<summary>important 样式 强制优先级、样式继承</summary>
				<h1 style="color: green">强制优先级</h1> <!-- 颜色设定绿色 -->
				<div id="div1">
					<p>我是P</p>	<!-- 字体、颜色可继承，样式不可继承 -->
				</div>

				<p id="test_p">测试</p>
				<p class="class1">class</p>
				<p class="class1">class</p>
				<p class="class1">class</p>
				<p class="class1">class</p>
				<h3 class="class1">h3</h3>
				<h3>h3</h3>	

				<input type="submit" value="1">
				<input type="submit" style="" value="1">
				<input type="submit" style="1" value="1">
				<input type="submit" style="2" value="1">
				<input type="submit">

				<ul>
					<li>a</li>
					<li>b</li>
				</ul>

				<ol>
					<li>a</li>
					<li>b</li>
				</ol>

				<ul>
					<li>a</li>
					<ul>
						<li>a</li>
						<li>b</li>
					</ul>
					<li>b</li>
					<ol>
						<li>a</li>
						<li>b</li>
					</ol>
				</ul>

				<h2>h2</h2>
				<p>test</p>
				<p>test</p>
			<hr>
		</details>
<!-- ===================================================== -->

		<details>
			<summary>canvas 绘制拼图 百分比</summary>
			<canvas id="mycanvas2" width="800" height="600" >
				浏览器不支持H5 canvas元素
			</canvas>
			<hr>
			<script type="text/javascript">
				var canvas = document.getElementById('mycanvas2')
					ctx = canvas.getContext('2d')
					ctx.shadowOffsetX = 0
					ctx.shadowOffsetY = 8
					ctx.shadowBlur = 8
					ctx.shadowColor = 'black'

					ctx.fillStyle = "black"
					ctx.font = "50px 楷体"
					ctx.fillText("绘制拼图", 50, 50)

					ctx.fillStyle="brown"
					ctx.moveTo(400,300)
					ctx.arc(400, 300, 160, 0, Math.PI / 3)
					ctx.fill()
					ctx.fillStyle = "black"
					ctx.font = "20px 楷体"
					ctx.fillText("15%", 470, 350)

					ctx.beginPath()
					ctx.fillStyle="blue"
					ctx.moveTo(400,300)
					ctx.arc(400, 300, 160, Math.PI / 3, Math.PI )
					ctx.fill()
					ctx.fillStyle = "black"
					ctx.font = "20px 楷体"
					ctx.fillText("33.3%", 350, 350)

					ctx.beginPath()
					ctx.fillStyle="yellowgreen"
					ctx.moveTo(400,300)
					ctx.arc(400, 300, 160, Math.PI, Math.PI * 5/ 3)
					ctx.fill()
					ctx.fillStyle = "black"
					ctx.font = "20px 楷体"
					ctx.fillText("33.3%", 350, 250)

					ctx.beginPath()
					ctx.fillStyle="green"
					ctx.moveTo(400,300)
					ctx.arc(400, 300, 160, Math.PI* 5/ 3, Math.PI * 2)
					ctx.fill()
					ctx.fillStyle = "black"
					ctx.font = "20px 楷体"
					ctx.fillText("15%", 470, 250)
			</script>
		</details>
<!-- ===================================================== -->

		<details>
			<summary>canvas 太极图案</summary>
			<canvas id="mycanvas1" width="800" height="600" >
				浏览器不支持H5 canvas元素
			</canvas>
			<hr>
			<script type="text/javascript">
				var canvas = document.getElementById('mycanvas1')
					ctx = canvas.getContext('2d')
					g1 = ctx.createLinearGradient(400, 100, 400, 500)
					g1.addColorStop(0, "black")
					g1.addColorStop(1, "white")
					g2 = ctx.createLinearGradient(400, 100, 400, 500)
					g2.addColorStop(0, "white")
					g2.addColorStop(1, "black")
					g3 = ctx.createRadialGradient(400, 400, 1, 400, 400, 10)
					g3.addColorStop(0, "white")
					g3.addColorStop(1, "black")
					g4 = ctx.createRadialGradient(400, 200, 1, 400, 200, 10)
					g4.addColorStop(0, "black")
					g4.addColorStop(1, "white")

					ctx.arc(400,300,200,Math.PI/2, Math.PI*1.5)
					ctx.arc(400,200,100,Math.PI/2, Math.PI*1.5, true)
					ctx.arc(400,400,100,Math.PI*1.5, Math.PI/2, true)
					ctx.fillStyle = g1
					ctx.fill()
					
					ctx.beginPath()
					ctx.arc(400,300,200,Math.PI/2, Math.PI*1.5, true)
					ctx.arc(400,400,100,Math.PI/2, Math.PI*1.5)
					ctx.arc(400,200,100,Math.PI*1.5, Math.PI/2)
					ctx.fillStyle = g2
					ctx.fill()

					ctx.beginPath()
					ctx.fillStyle=g3
					ctx.arc(400, 400, 10, 0, Math.PI*2)
					ctx.fill()

					ctx.beginPath()
					ctx.fillStyle=g4
					ctx.arc(400, 200, 10, 0, Math.PI*2)
					ctx.fill()

					ctx.shadowOffsetX = 10
					ctx.shadowOffsetY = 10
					ctx.shadowBlur = 10 // 模糊度
					ctx.shadowColor = 'blue'

					ctx.lineWidth = 1;	
					ctx.fillStyle = "red"
					ctx.font="70px 楷体"
					ctx.fillText("太极阴影", 50, 50)
			</script>
		</details>
<!-- ===================================================== -->

		<details>
			<summary>canvas</summary>
			<canvas id="mycanvas" width="800" height="600" >
				浏览器不支持H5 canvas元素
			</canvas>
			<script type="text/javascript">
				var canvas = document.getElementById('mycanvas');
				var ctx = canvas.getContext('2d');

				ctx.rect(50,50,100,200);
				ctx.stroke();

				ctx.beginPath();

				ctx.fillStyle='blue';
				ctx.fillRect(200,200,10,200);

				ctx.strokeStyle = 'yellowgreen';
				ctx.strokeRect(300,300,20,20);

				ctx.lineWidth = 10;
				ctx.strokeStyle = 'blue';
				ctx.fillStyle = 'yellowgreen';
				ctx.arc(200,200, 100, Math.PI, Math.PI * 2);
				ctx.stroke();
				ctx.fill();
				ctx.closePath()

				ctx.lineWidth = 1;
				ctx.font="50px 楷体"
				ctx.strokeText("看", 450, 400)
				ctx.fillText("看", 500, 400)
				ctx.closePath()

				g = ctx.createLinearGradient(0,0,800,600)
				g.addColorStop(0, "blue") // 渐变色起点颜色
				g.addColorStop(1, "red")  // 渐变色终点颜色
				ctx.fillStyle = g;
				ctx.fillRect(50,550,700,100)
			</script>
			<hr>
		</details>
<!-- ===================================================== -->

		<details>
			<summary>video、audio、flash</summary>
			<video controls="显示控件" title="动画显示" loop="循环播放" title="视频播放">
				<source src="mp4地址.mp4" type="video/mp4">	<!-- 兼容 -->
				<source src="webm视频地址.webm" type="video/webm">
				<source src="ogg视频地址.ogg" type="video/ogg">
				浏览器不支持H5 video元素
			</video>

			<audio  controls="" title="歌曲播放">
				<source src="http://mp3d.04336789.com/music/down/458495" type="audio/mp3"></source>
				<source src="ogg格式歌曲.ogg" type="audio/ogg"></source>
				浏览器不支持H5 audio元素
			</audio>

			<embed src="***.swf" type="application/x-shockwave-flash" width="800" height="600">
			<hr>
		</details>
<!-- ===================================================== -->
		<details>
			<summary>button、label、input 综合</summary>
			<section id="section1">
				<fieldset>
					<legend>注册用户</legend>
					<form action="">
						<p>
							<label for="user">账号：</label>
							<input type="text" autofocus="" maxlength="10" placeholder="账号" id="user" name="user" required="">
						</p>					
						<p>
							<label for="passwd">密码：</label>
							<input type="password" maxlength="16" placeholder="密码" id="passwd" name="passwd">
						</p>			
						<p>
							<label for="tel">电话号码：</label>
							<input type="text" name="tel" placeholder="手机号码" pattern="[1]{1}[0-9]{10}" id="tel">
						</p>
						<p>
							<label for="email">电子邮件：</label>
							<input type="email" id="email" name="email" placeholder="电子邮件">
						</p>
						<button type="submit">注册用户</button>
					</form>
				</fieldset>
			</section>
			<hr>
		</details>
<!-- ===================================================== -->
		<details>
			<summary>a</summary>
			<a href="http://www.baidu.com"  target="_blank"><img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png" alt="百度图片" title="百度图片" width="100px"></a>
			<a href="http://www.baidu.com"  target="myf">百度</a>
			<a href="http://www.ifeng.com"  target="myf">凤凰网</a>
			<iframe src="http://www.ifeng.com" name="myf"></iframe>
			<hr>
		</details>
<!-- ===================================================== -->
		<details>
			<summary>progress、meter</summary>
			<form action="">
				<meter value="20" min="0" max="100" low="30" high="80"></meter>
				<meter value="50" min="0" max="100" low="30" high="80"></meter>
				<meter value="90" min="0" max="100" low="30" high="80"></meter>
			</form>
			<progress value="50" max="100">50
			<hr>
		</details>
<!-- ===================================================== -->
		<details open="">
			<summary>fieldset、legend</summary>
			<fieldset>
				asdlkfjladkjsf
				<legend>自动<b>open</b>属性</legend>
				asdflkjalsdkjf
			</fieldset>
			<hr>
		</details>
<!-- ===================================================== -->
		<details>
			<summary>output、range</summary>
			<form action="" oninput="num.value=parseInt(num1.value)+parseInt(num2.value)">
				<input type="number" id="num1">+
				<input type="number" id="num2">=
				<output name="num" for="num1 num2"></output>
			</form>

			<form action="" oninput="o.value=r.value">
				<input type="range" name="r" value="50">
				<output name="o" for="r">50</output>
			</form>
			<hr>
		</details>
<!-- ===================================================== -->
		<details >
			<summary>label、checkbox</summary>
			<input type="checkbox" name="cb" id="cb1" value="1" checked=""><label for="cb1">一</label>
			<input type="checkbox" name="cb" id="cb2" value="2"><label for="cb2">二</label>
			<input type="checkbox" name="cb" id="cb3" value="3"><label for="cb3">三</label>
			<hr>
		</details>
<!-- ===================================================== -->
		<details>
			<summary>form、input</summary>
			<form action="">
				请输入学号：<input type="text" name="code" pattern="[0-9]{1}[a-z]{2}">
				<input type="submit">	<!-- 正则表达式 -->
			</form>

			<form action="" method="post">
				<input type="file" multiple="">
				<input type="submit">
			</form>

			<form action="" method="post">
				<input type="file" multiple="">
				<input type="submit">
			</form>

			<form action="" method="post">
				用户名：<input type="text" autofocus="" name="user" required="">
				密码：<input type="password" placeholder="请输入密码" name="passwd">
				数字：<input type="number" name="number">
				Eamil: <input type="Eamil" readonly="" value="只读">
				<input type="checkbox" name="cb" value="1" checked="">一
				<input type="checkbox" name="cb" value="2">二
				<input type="checkbox" name="cb" value="3">三
				<input type="radio" name="ra" value="1">男
				<input type="radio" name="ra" value="2">女
				<input type="color">
				<input type="submit">
				<input type="reset">
			</form>
			<hr>
		</details>
<!-- ===================================================== -->
		<details>
			<summary>iframe</summary>
			<a href="http://www.ifeng.com" target="myframe">凤凰网</a>
			<a href="http://www.ixiqi.com" target="myframe">爱稀奇</a><br>
			<iframe src="http://www.baidu.com" name="myframe" frameborder="0"></iframe>
			<hr>
		</details>
<!-- ===================================================== -->
		<details>
			<summary>figure、figcaption</summary>
			<figure>
				<img src="*.jpg" alt="图片" width="300"><img src="*.jpg" alt="图片" width="300">
			</figure>
			<figcaption>我的厨艺作品-馒头</figcaption>
			<hr>
		</details>
<!-- ===================================================== -->
		<details>
			<summary>address</summary>
			<address>
				作者：****；邮箱：1223@163.com..........
			</address>
			<hr>
		</details>
<!-- ===================================================== -->
		<details>
			<summary>nav、ul、li</summary>
			<nav>
				<ul>
					<li><a href="">首页</a></li>
					<li><a href="">电脑办公</a></li>
					<li><a href="">平面设计</a></li>
					<li><a href="">设计素材</a></li>
					<li><a href="">电脑办公</a></li>
					<li><a href="">平面设计</a></li>
					<li><a href="">设计素材</a></li>
					<li><a href="">自学交流</a></li>
				</ul>
			</nav>
			<hr>
		</details>
<!-- ===================================================== -->
		<details>
			<summary>article、header、footer、section、time、aside</summary>
			<article>
				<header>
					<h3>文章标题</h3>
					<h5>作者：***</h5>
				</header>
				<p>我是正文********************<br>********************<br>********************<br>********************<br></p>
				<section>
					<article>
						<header><h4>网友A的评论</h4></header>
						<p>评论内容......................</p>
						<footer><time datetime="2015-10-22">文章发表于2015年10月22日</time>
</footer>
					</article>
					<article>
						<header><h4>网友b的评论</h4></header>
						<p>评论内容......................</p>
						<footer><time datetime="2015-10-22">文章发表于2015年10月22日</time>
</footer>
					</article>
					<footer>
						<p>尾部：阅读：300 评论：80</p>
					</footer>
					<aside>
						<p>名词解释：-------</p>
						<p>本文参考了《****》：-------</p>
					</aside>
				</section>
			</article>
			<hr>
		</details>
<!-- ===================================================== -->
		<details>
			<summary>talbe</summary>
			<table cellspacing="0" border="1">
				<tr align="center" style="font-weight: bold" ><td>id</td><td>token</td><td>ip</td><td>login_time</td></tr>
				<tr><td>1</td><td>82e3d3346abd9787c85ba02247c2fa58</td><td>192.168.70.61:51516</td><td>2017-10-27 11:14:10</td></tr>
			</table>
			<hr>
			<table id="tb" cellspacing="0">
				<tr><td colspan="2" id="td1">我是头部</td> </tr>
				<tr><td id="td2">我是侧边栏</td><td id="td3">我是主体内容</td></tr>
				<tr><td colspan="2" id="td4">我是底部内容</td></tr>
			</table>
			<hr>
		</details>
<!-- ===================================================== -->
		<details>
			<summary>锚点</summary>
			<p>中国古典长篇小说四大名著，简称四大名著，是指<a href="#sgyy"><b>《三国演义》</b></a>平和艺术成就，细致的刻画和所蕴含的深刻思想都为历代读者所称道，其中的故事、场景、人物已经深深地影响了中国人的思想观念、价值取向。可谓中国文学史上的四座伟大丰碑。</p>
			<br><br><br><br>
			<a id="sgyy"> <h2>《三国演义》</h2>
			<p>《三国演义》全名：《三国志通俗演义》</p>
			<p>
				作者：罗贯中（ 约1330年—约1400年），名本、才本，字贯中，号湖海散人。元末明初作家，戏曲家。罗贯中生于元末社会动乱之时，有自己的政治理想，不苟同于流俗，曾参与反元的起义斗争。明朝建立之后，专心致力于文学创作。著有小说《隋唐两朝志传》、《残唐五代史演义》、《三遂平妖传》、《粉妆楼》、《三国演义》、施耐庵合著《水浒传》，另著有剧本《赵太祖龙虎风云会》、《忠正孝子连环谏》、《三平章死哭蜚虎子》
			</p>
			<p>
			   三国演义介绍：《三国演义》是综合民间传说和戏曲、话本，结合陈寿的《三国志》、范晔《后汉书》、元代《三国志平话》、和裴松之注的史料，以及作者个人对社会人生的体悟写成。现所见刊本以明嘉靖本最早，分24卷，240则。清初毛宗岗父子又做了一些修改，并成为现在最常见的120回本。
			</p>
			<hr>
		</details>
	</body>
</html> 